<template>
  <div>
    <!-- v-model="dialogVisible" 上线会报错 这里用的是model-value-->
    <el-dialog
      :model-value="visible"
      :title="title"
      :width="width + 'px'"
      :before-close="onClose"
      append-to-body
    >
      <div class="container" :style="{ height: height + 'px' }">
        <slot name="content"></slot>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="onClose">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
const props = defineProps({
  // 弹窗标题
  title: {
    type: String,
    default: '标题'
  },
  // 控制弹框的显示和隐藏
  visible: {
    type: Boolean,
    default: false
  },
  width: {
    type: Number,
    default: 600
  },
  height: {
    type: Number,
    default: 250
  }
})
const emit = defineEmits(['onClose', 'onConfirm'])
// 定义弹框的关闭
const onClose = () => {
  emit('onClose')
}
// 定义弹框的确定
const onConfirm = () => {
  emit('onConfirm')
}
</script>
<style lang='scss'>
.container {
  overflow-x: initial;
  overflow-y: auto;
}

.el-dialog {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  .el-dialog__header {
    margin-right: 0;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    background-color: #1890ff !important;
    // background:pink !important;
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8eaec !important;
    padding: 10px;
  }
  .el-icon svg {
    color: #fff;
  }
}
</style>